<template>
	<view>
		<u-navbar title="">
			<view class="flex f1 flex-jc-fe" style="margin-right: 20rpx;">
				余额明细
			</view>
		</u-navbar>
		<view class="center-text">
			<view style="font-size: 72rpx;margin-top: 50rpx;">￥</view>
			<view style="margin: 30rpx 0 20rpx 0;">我的余额</view>
			<view style="font-size: 72rpx;font-weight: bold;">￥123</view>
		</view>
		<view class="flex flex-dir-c flex-ai-c flex-jc-fe center-text" style="height: 60vh;">
			<view class="btn" @click="recharge">
				充值
			</view>
		</view>
	</view>
	<u-popup v-model="all.isShow" mode="center" border-radius="25">
		<view style="width: 90vw;border-radius: 50%;padding: 30rpx 0 50rpx 0;">
			<view class="center-text" style="margin: 30rpx 0;font-weight: bold;">请设置支付密码</view>
			<u-message-input maxlength="6" focus dot-fill @finish="finish" active-color="rgb(252,186,13)"></u-message-input>
			<!-- <u-input v-model="all.money" placeholder="输入金额" type="number"></u-input> -->
		</view>
	</u-popup>
</template>

<script setup lang="ts">
	import user from '@/api/user.js'
	import {
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	let all = reactive({
		isShow: false,
		money: 0
	})
	const finish = async (e: number) => {
		const res = await user.updataUserInfo({
			payment_pwd: e
		})
		uni.showToast({
			title: res.msg,
			icon: 'none'
		})
	}
	const recharge = () => {
		if(!checkUserPaymentPwd()){
			
		}else {
			uni.showToast({
				title: '未设置支付密码，请设置支付密码！',
				icon: 'none'
			})
			all.isShow = true
		}
	}
	const checkUserPaymentPwd = async () => {
		const res = await user.checkUserPaymentPwd()
		return res.data
	}
	onLoad(()=>{
		
	})
</script>

<style lang="scss" scoped>
	.btn{
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: rgb(252,186,13);
		color: #fff;
		border-radius: 12rpx;
	}
	.center-text{
		text-align: center;
	}
</style>